import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {BrowserRouter, Outlet, Route, Routes, useNavigate} from 'react-router-dom'
import {Breadcrumb, Layout, Menu,} from "antd"
import "./index.css"
import './css/App.css'
import Login from './apps/login'
import Main from './apps/manager'

const {Header, Content, Footer} = Layout;

const items = [
    {label: '登陆', key: 'login'}, // 菜单项务必填写 key
    {label: '控制台Main', key: 'main'},

];
const App = () => {
    const navigate = useNavigate()
    const menuClick = (e) => {
        console.log(e)
        navigate(e.key)
    }
    return (<div className="App">
        <Layout className="layout">
            <Header>
                <div className="logo"/>
                <Menu theme="dark" onClick={menuClick} mode="horizontal" items={items} defaultSelectedKeys={['login']}/>
            </Header>
            <Content style={{padding: '0 50px'}}>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>系统</Breadcrumb.Item>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>控制台</Breadcrumb.Item>
                </Breadcrumb>
                <div className="site-layout-content">
                    <Outlet/>
                </div>
            </Content>
            <Footer style={{textAlign: 'center'}}>工具</Footer>
        </Layout>
    </div>)
}


ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App/>}>
                    <Route path="login" element={<Login/>}/>
                    <Route index element={<Login/>}/>
                    <Route path="main" element={<Main/>}/>
                </Route>
            </Routes>
        </BrowserRouter>
    </React.StrictMode>
);


// ReactDOM.createRoot(document.getElementById("root").render(

// ));
//
// ReactDOM.render(
//     ,
//     document.getElementById("root")
// );